<template>
  <h1>hello vue3
  </h1>
  <h1>
    姓名:{{ person.name }}
  </h1>
  <h1>
    年龄:{{ person.age }}
  </h1>
  <h1>
    课程:{{ person.obj.course }}
  </h1>
  <h1>
    爱好:{{ person.list }}
  </h1>
  <button @click="xd">打招呼</button>
  <button @click="changePerson">切换人员</button>
  <button @click="changeCourse">切换course</button>
  <button @click="changeHobby">切换爱好</button>

</template>

<script>
import {reactive, ref} from 'vue'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup(){
    let person = reactive({
      name:'张三',
      age:18,
      obj:{
        xd:'小弟课程',
        course:'vue3'
      },
      list:['吃饭','睡觉','敲代码']
    })
    // let obj = reactive({
    //   xd:'小弟课程',
    //   course:'vue3'
    // })

    // console.log(obj.value)

    // let list = reactive(['吃饭','睡觉','敲代码'])
    function xd(){
      alert(`你好，我是${person.name}`)
    }
    function changePerson(){
      (person.name='李四'),(person.age = 19)
    }
    function changeCourse(){
      (person.obj.course='react')
    }
    function changeHobby(){
      person.list[2] = '看电视'
    }
    // 对象类型的使用

    return{
      xd,
      person,
      changeHobby,
      changePerson,
      changeCourse
    }
  }
}
</script>

<!-- ref可以处理基本数据类型，数组或者对象的数据
  基本数据类型的响应式是通过代理对象 object.defineProperty 实现的
  对象类型的中的响应式是通过es6中的proxy实现的
 -->

 <!-- 实现数据的响应式reactive
  定一个对象类型的响应式，不能对基本数据进行更改

  和ref的不同点：
  处理数据类型不同，ref基本数据类型，reactive 是对象和数组类型
  实现原理不同，ref是object defineProperty  reactive 是 proxy
  ref操作需要加.value
  ref比较麻烦 可以用reactive 进行赋值一个对象的处理
 -->


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
